<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';


const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.8,
    side: THREE.DoubleSide,
    shininess: 50, //高光部分的亮度，默认30
})

// for (let i = 0; i < 10; i++) {
//     const mesh = new THREE.Mesh(geometry, material);
//     mesh.position.set(i * 20, 0, 0);
//     scene.add(mesh);
// }
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(75, width / height, 10, 3000);
camera.position.set(50, 50, 50);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const directionalLight = new THREE.SpotLight(0xffffff, 10000.0);
directionalLight.position.set(100, 100, 100);
const directionalLightHelp = new THREE.SpotLightHelper(directionalLight);
scene.add(directionalLight);
scene.add(directionalLightHelp);

// 环境光（补充：避免物体全黑）
const ambientLight = new THREE.AmbientLight(0x040404);
scene.add(ambientLight);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);



const stats = new Stats;
stats.showPanel(0);
document.body.appendChild(stats.dom);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    stats.update();
    renderer.render(scene, camera);
    console.log(camera.near, camera.fov, camera.position);
})

const render = ()=>{
    mesh.rotation.y+=0.01;
     mesh.rotation.x+=0.01;
    renderer.render(scene,camera);
    requestAnimationFrame(render);
}
render();

</script>